/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="common-feature__wrap">
        <div class="common-feature__container">
            <div class="operate-step__wrap">
                <operate-step 
                    :step-list="ruleGraphList"
                    :active-index="operateActiveIndex"
                    @operate-preview="queryOperatePreview" />
            </div>
            <preview-table 
                :table-header-list="tableHeaderList"
                :table-data="previewList" />
        </div>
    </div>
</template>
<script>
import OperateStep from './operate_step/index.vue';
import PreviewTable from './preview_table.vue';
import urlAdapter from 'src/home/mod_common/url_adapter';

export default {
    name: 'PreviewFeature',
    components: {
        OperateStep,
        PreviewTable
    },
    props:{
        ruleGraphList:{
            default:()=>[],
            type:Array
        }
    },
    data () {
        return {
            showDataSourceActive:false,
            previewList:[], //预览列表
            operateActiveIndex:-1, //步骤activeIndex
            oprIndex:-1, //编辑算子所用
            graphId:'',
            tableFlag:false,
            tableHeaderList:[]
        };
    },
    computed: {
        projectId () {
            return this.$route.query.projectId || '';
        }
    },
    watch: {
        ruleGraphList:{
            deep:true,
            handler () {
                this._dataPreview(this.ruleGraphList.length - 1, this.ruleGraphList);
            }
        }
    },

    methods: {

        //预览数据源
        _previewDataSource () {
            this._dataPreview(0, this.ruleGraphList);
        },

        //预览算子
        queryOperatePreview (index) {
            this._dataPreview(index, this.ruleGraphList);
        },
        async _dataPreview (index, list) {

            // 0代表获取数据源算子
            let stepData = index === 0 ? list : list.slice(0, index + 1);

            //预览数据源算子所用。
            if (index === 0 && this.ruleGraphList.length > 0) {
                stepData = this.ruleGraphList.slice(0, 1);
            }
            let params = {
                ruleGraph: {
                    operators:stepData,
                    firstColumns:{}
                },
                projectId: this.projectId
            };
            let previewURL = urlAdapter('feature/graph/sql');
            this.$mask();
            let req;
            this.$once('hook:beforeDestroy', ()=>{
                req.abort();
            }); 
            let jsonData = await this.$ajax.post(previewURL, params, {
                before:(request)=>{
                    req = request;
                }
            });
            this.$unmask();
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$unmask();
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            this.$unmask();
            if (index === 0) {
                this.operateActiveIndex = -1;
                this.showDataSourceActive = true;
            } else {
                this.operateActiveIndex = index;
                this.showDataSourceActive = false;
            }
            let columns = data.columns;

            //读取表格内容
            try {
                this.previewList = JSON.parse(data.result);
                let headerList = [];
                for (let i in columns) {
                    if (Object.prototype.hasOwnProperty.call(columns, i)) {
                        headerList.push({
                            name: i
                        });
                    }
                }

                this.tableHeaderList = headerList;
            } catch (e) {
                this.previewList = [];
            }
        }
            
    }
};
</script>
<style lang="less">
    .common-feature__wrap{
        width: 100%;
        height:100%;
        .model-training__top{
            display: flex;
            margin: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }
    }
  
    .common-feature__container {
        display: flex;
        width: 1640px;
        height: 100%;
       
        .operate-step__list{
            border: 0;
        }
        .operate-step-training__container{
            padding: 0;
        }
        .datasource-container{
            border-bottom: 1px solid #DEE3ED; 
            padding:16px 0;
            text-align:center;
            .datasource__box{
                background: #FFFFFF;
                border: 1px solid #C8D0E0;
                border-radius: 2px;
                width: 136px;
                height: 32px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &:hover,&.active{
                    border: 2px solid #3366FF;
                }
            }
        }
        .operate-step__wrap{
            width: 242px;
            margin: 0 4px 0 8px;
            border: 1px solid #DEE0E1;
            .operate__box{
                &:hover{
                    border: 2px solid #3366FF;
                }
            }
        }
        .preview-operate{
            margin: 0 10px;
        }
    }
    
    
</style>
    